import React from 'react'

// antd-mobile
import {Tabs,} from 'antd-mobile'

import './TabWithCustomUnderline.css'

const TabWithCustomUnderline = props => {

    const DefaultTabBar = Tabs.DefaultTabBar

    const {
        // history,
        tabs,
        children,
        prefixCls,
        onChange,
        tabBarBackgroundColor,
        tabBarActiveTextColor,
        tabBarInactiveTextColor,
        tabBarUnderlineStyle,
        noUnderline,
        prerenderingSiblingsNumber,
        animated,
        initialPage,
        destroyInactiveTab,
        page,
        onTabClick,
    } = props


    const renderTabBar = (props) => {

        return (
            <DefaultTabBar
                {...props}
                renderUnderline={ulProps => {
                    const {style, ...otherProps} = ulProps
                    const ulStyle = {
                        ...style,
                        border: 'none',
                    }
                    if (noUnderline === 'true') {
                        return null
                    }
                    return (
                        <div style={ulStyle} {...otherProps}>
                            <div
                                style={tabBarUnderlineStyle}
                                className='go-back-tab-underline'
                            />
                        </div>
                    )
                }}
            />
        )
    }

    const cls = prefixCls ? `${prefixCls} am-tabs` : 'am-tabs'

    return (
        <Tabs
            tabBarBackgroundColor={tabBarBackgroundColor}
            tabs={tabs}
            tabBarActiveTextColor={tabBarActiveTextColor ? tabBarActiveTextColor : '#333'}
            tabBarInactiveTextColor={tabBarInactiveTextColor? tabBarInactiveTextColor : '#aaa'}
            prefixCls={cls}
            renderTabBar={(props) => renderTabBar(props, prefixCls)}
            swipeable={false}
            onChange={onChange}
            onTabClick={onTabClick}
            prerenderingSiblingsNumber={prerenderingSiblingsNumber ? prerenderingSiblingsNumber : 0}
            destroyInactiveTab={destroyInactiveTab}
            animated={animated}
            initialPage={initialPage > 0 ? initialPage : 0}
            // goToTab={(i) => {console.log(i)}}
            page={page}
        >
            {children}
        </Tabs>
    )

}
export default TabWithCustomUnderline
